<template>
  <div class="live-view">
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh" success-text="刷新成功">
      <keep-alive>
        <live-masonry-view :DataArr="liveDataArr" />
      </keep-alive>
    </van-pull-refresh>
  </div>
</template>

<script>
import {
  get_recommended_live,
  get_recommended_forecast_live,
  get_recommended_official_live
} from "@/apis/http.js"; //首先，引入http.js中暴露的获取用户的方法
import LiveMasonryView from "@/components/HomeComponents/FoundComponents/LiveMasonryView.vue";
export default {
  name: "LiveView",
  data() {
    return {
      isLoading: false,
      liveDataArr: []
    };
  },
  components: { LiveMasonryView },
  mounted() {
    this.getNewRecommendedLive();
  },
  methods: {
    //第二步  在自定义方法中调用get_users方法，通过async和awit搭配直接获取到数据
    async getNewRecommendedLive() {
      //通过路由传参的形式，请求数据！！！ {data:res}直接结构赋值出来data给res
      let { data: live } = await get_recommended_live();
      let { data: forecast_live } = await get_recommended_forecast_live();
      let { data: official_live } = await get_recommended_official_live();
      // console.log(res); // 这样就获取到了请求的所有数据！
      this.liveDataArr = [
        ...live.lives,
        ...forecast_live.forecasts,
        ...official_live.lives
      ];
      //后续就可以通过赋值的方式，在页面上渲染数据。
    },

    onRefresh() {
      setTimeout(() => {
        this.$nextTick(() => {
          this.isLoading = false;
          this.getNewRecommendedLive();
        });
      }, 1000);
    }
  }
};
</script>

<style lang="scss" scoped>
.live-view {
  width: 100vw;
  min-height: 100vh;
  margin-bottom: 55px;
}
</style>